<template>
  <a-card :bordered="false">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="大区管理">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="12">
                <a-form-item label="大区名称">
                  <a-input placeholder="请输入大区名称" v-model="queryParam.description"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
          <a-button @click="handleAreaAdd" type="primary" icon="plus">添加大区</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="2">
                <a-icon type="lock" @click="batchFrozen('PARTY_DISABLED')" />
                停用
              </a-menu-item>
              <!-- <a-menu-item key="3"> <a-icon type="unlock" @click="batchFrozen('PARTY_ENABLED')" />解冻 </a-menu-item> -->
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down" />
            </a-button>
          </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="dictionaryCode"
            :columns="columns1"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <template slot="avatarslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
              </div>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="handleAreaEdit(record.dictionaryId)">编辑</a>

              <a-divider type="vertical" />

              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item v-if="record.dictionaryCode2 != 'N'">
                    <a-popconfirm title="确定停用吗?" @confirm="handleStop(record.dictionaryCode, 'Y', 'Y')">
                      <a>停用</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item v-if="record.dictionaryCode2 == 'N'">
                    <a-popconfirm title="确定启用吗?" @confirm="handleStop(record.dictionaryCode, 'N', 'Y')">
                      <a>启用</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="postLeader(record, 'Y')">指定领导</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->

        <user-area-modal ref="modalAreaForm" @ok="modalAreaFormOk"></user-area-modal>
      </a-tab-pane>
      <a-tab-pane key="2" tab="BU管理" force-render @change="callback">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="12">
                <a-form-item label="BU名称">
                  <a-input placeholder="请输入BU名称" v-model="queryParam.description"></a-input>
                </a-form-item>
              </a-col>

              <!-- <template v-if="toggleSearchStatus"> -->

              <!-- </template> -->

              <a-col :md="6" :sm="8">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
          <a-button @click="handleAdd" type="primary" icon="plus">添加BU</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="2">
                <a-icon type="lock" @click="batchFrozen('PARTY_DISABLED')" />
                停用
              </a-menu-item>
              <!-- <a-menu-item key="3"> <a-icon type="unlock" @click="batchFrozen('PARTY_ENABLED')" />解冻 </a-menu-item> -->
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down" />
            </a-button>
          </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <div>
          <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
            >项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div> -->

          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="dictionaryCode"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <template slot="avatarslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
              </div>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record.dictionaryId)">编辑</a>

              <a-divider type="vertical" />

              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item v-if="record.parentId">
                    <a-popconfirm title="确定独立吗?" @confirm="handleOut(record)">
                      <a>独立</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item v-if="record.dictionaryCode2 != 'N'">
                    <a-popconfirm title="确定停用吗?" @confirm="handleStop(record.dictionaryCode, 'Y', 'N')">
                      <a>停用</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item v-if="record.dictionaryCode2 == 'N'">
                    <a-popconfirm title="确定启用吗?" @confirm="handleStop(record.dictionaryCode, 'N', 'N')">
                      <a>启用</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="postLeader(record, 'N')">指定领导</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->

        <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
      </a-tab-pane>
    </a-tabs>

    <a-modal title="指定领导" :visible="leaderVisible" @ok="leaderOk()" @cancel="leaderVisible = false">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="指定领导">
          <j-search-select-tag
            v-model="leaderParams.partyId"
            dict="Person,name,partyId,isModule=CRM"
            @change="chooseUser"
            placeholder="请选择领导"
          />
        </a-form-item>
        <a-form-item label="登录账号">
          <a-input v-model="leaderParams.mobile" placeholder="请输入登录账号"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import UserModal from './modules/UserModal'
import UserAreaModal from './modules/UserAreaModal'
import { putAction, getFileAccessHttpUrl } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import { httpAction, getAction } from '@/api/manage'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
export default {
  name: 'UserList',
  mixins: [JeecgListMixin],
  components: {
    UserModal,
    UserAreaModal,
    JInput,
    JSearchSelectTag,
  },
  data() {
    return {
      disableMixinCreated: true,
      description: '这是用户管理页面',
      confirmLoading: true,
      visible: false,
      leaderVisible: false,
      dataParam: {
        dictionaryTypeId: 'BU_DEPARTMENT',
      },
      leaderParams: {
        partyIdFrom: '',
        partyId: '',
        mobile: '',
      },
      columns1: [
        {
          title: '大区名称',
          align: 'center',
          dataIndex: 'description',
          width: 200,
        },
        {
          title: '大区编码',
          align: 'center',
          dataIndex: 'dictionaryCode',
          width: 200,
        },
        {
          title: '领导人',
          align: 'center',
          width: 80,
          dataIndex: 'personName',
        },
        {
          title: '状态',
          align: 'center',
          width: 80,
          dataIndex: 'dictionaryCode2',
          customRender(text, record, index) {
            if (text == 'N') {
              return '已禁用'
            } else {
              return '已启用'
            }
          },
        },
        {
          title: '排序值',
          align: 'center',
          width: 80,
          dataIndex: 'sequenceId',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 170,
        },
      ],
      columns: [
        {
          title: '所属大区',
          align: 'center',
          dataIndex: 'parentId_dictText',
          width: 200,
        },
        {
          title: 'BU名称',
          align: 'center',
          dataIndex: 'description',
          width: 200,
        },
        {
          title: 'BU编码',
          align: 'center',
          dataIndex: 'dictionaryCode',
          width: 200,
        },
        {
          title: '领导人',
          align: 'center',
          width: 80,
          dataIndex: 'personName',
        },
        {
          title: '状态',
          align: 'center',
          width: 80,
          dataIndex: 'dictionaryCode2',
          customRender(text, record, index) {
            if (text == 'N') {
              return '已禁用'
            } else {
              return '已启用'
            }
          },
        },
        {
          title: '排序值',
          align: 'center',
          width: 80,
          dataIndex: 'sequenceId',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 170,
        },
      ],
      url: {
        imgerver: window._CONFIG['staticDomainURL'],
        list: '/online/api/pagingDataDictionary',
        update: '/online/api/updateDataDictionary',
        disableBuAndUserLogin: '/online/api/disableBuAndUserLogin',
        createCrmBuAdminUserLogin: '/online/api/createCrmBuAdminUserLogin',
        getHrEmployee: '/online/user/getHrEmployee',
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  created() {
    //默认先查询大区
    this.dataParam.dictionaryTypeId = 'AREA_DEPARTMENT'
    this.loadData()
  },
  methods: {
    handleAreaAdd: function () {
      this.$refs.modalAreaForm.add()
      this.$refs.modalAreaForm.title = '新增'
      this.$refs.modalAreaForm.disableSubmit = false
    },
    handleAreaEdit: function (record) {
      this.$refs.modalAreaForm.edit(record)
      this.$refs.modalAreaForm.title = '编辑'
      this.$refs.modalAreaForm.disableSubmit = false
    },
    modalAreaFormOk() {
      this.dataParam.dictionaryTypeId = 'AREA_DEPARTMENT'
      this.pageNo = 1
      this.queryParam.description = ''
      this.loadData()
    },
    modalFormOk() {
      this.dataParam.dictionaryTypeId = 'BU_DEPARTMENT'
      this.pageNo = 1
      this.queryParam.description = ''
      this.loadData()
    },
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar, this.url.imgerver, 'http')
    },
    postLeader(record, isArea) {
      this.leaderParams.partyIdFrom = record.dictionaryCode
      this.leaderParams.partyId = ''
      this.leaderParams.mobile = ''
      this.leaderParams.isArea = isArea
      this.leaderVisible = true
    },
    handleStop(code, state, isArea) {
      let params = {}
      params.partyIdFrom = code
      params.enabled = state
      params.isArea = isArea
      getAction(this.url.disableBuAndUserLogin, params).then((res) => {
        if (res.success) {
          if (state == 'Y') {
            this.$message.success('停用成功!')
          } else {
            this.$message.success('启用成功!')
          }
          this.loadData()
        }
      })
    },
    chooseUser(e) {
      httpAction(this.url.getHrEmployee, { partyId: e }).then((res) => {
        if (res.result.phone) {
          this.$nextTick(() => {
            this.leaderParams.mobile = res.result.phone
          })
        }
      })
    },
    leaderOk() {
      getAction(this.url.createCrmBuAdminUserLogin, this.leaderParams).then((res) => {
        if (res.success) {
          this.$message.success('提交成功!')
          this.leaderVisible = false
          if (this.leaderParams.isArea == 'Y') {
            this.dataParam.dictionaryTypeId = 'AREA_DEPARTMENT'
          } else {
            this.dataParam.dictionaryTypeId = 'BU_DEPARTMENT'
          }
          this.pageNo = 1
          this.queryParam.description = ''
          this.loadData()
        }
      })
    },

    callback(key) {
      if (key == 1) {
        this.dataParam.dictionaryTypeId = 'AREA_DEPARTMENT'
        this.pageNo = 1
        this.queryParam.description = ''
        this.loadData()
      } else {
        this.dataParam.dictionaryTypeId = 'BU_DEPARTMENT'
        this.pageNo = 1
        this.queryParam.description = ''
        this.loadData()
      }
    },
    handleOut(record) {
      record.parentId = ''
      record.parentId_dictText = ''
      getAction(this.url.update, record).then((res) => {
        if (res.success) {
          this.$message.success('提交成功!')
          this.loadData()
        }
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>